<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深浅拷贝</title>
</head>
<body>
<h3>深浅拷贝</h3>
<p>
    开发中我们经常需要复制一个对象。如果直接用赋值会有 浅拷贝 问题, 2个对象之间会关联修改数据 <br>
    1_JavaScript基础/1_ JavaScript简介/4_知识扩展_重要的理论.html <br>
    实例里说明了这个问题
</p>
<p>
    要解决复制 引用类型 数据, 出现互相关联 可以修改对方数据的问题 <br>
    我们所以 深浅拷贝方法 来解决
</p>
<hr>

<p>首先浅拷贝和深拷贝只针对引用类型</p>

<h3>浅拷贝</h3>
<p>
    浅拷贝：拷贝的是地址 <br>
常见方法： <br>
1. 拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象 <br>
2.拷贝数组：Array.prototype.concat() 或者 [...arr]
</p>
<p>
    有一个问题 <br>
    如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)
</p>
<pre style="font-size: 20px;">
    总结:
1. 直接赋值和浅拷贝有什么区别？
     直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对
象栈里面的地址
     浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响
2. 浅拷贝怎么理解？
     拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
     如果属性值是引用数据类型则拷贝的是地址
</pre>
<hr>

<script>
    // ----------- 浅拷贝方法 演示 ----------
      const 对象 = {
      姓名: '海燕',
      年龄: 22,
      家庭: {
        孩子: '小孩'
      }
    }
    // 浅拷贝 方法, 展开运算符 复制对象
    console.log('展开运算符 {...obj} 拷贝对象')
    const 对象2 = { ...对象 }
    console.log(对象2) // 输出看结果, 复制了 '对象' 的信息
    对象2.年龄 = 20 // 修改属性

    console.log(对象2) // 属性被修改了
    console.log(对象) // 另一个对象,没有被关联修改属性


    console.log('Object.assgin() 拷贝对象')
    const 对象3 = {}
    Object.assign(对象3, 对象) // 把一个对象复制给,另外一个对象
    console.log(对象3) // 把对象的信息复制过来了

    对象3.姓名 = '丽华' // 修改对象里的属性
    对象3.家庭.孩子 = '小小'

    console.log(对象3) // 输出看结果, 属性被修改了
    console.log(对象)  // 另一个对象,第2层对象修改了属性
    // 浅拷贝: 如果是单层对象，没问题，如果有多层就有问题
</script>

</body>
</html>